// 自动计算瀑布流的位置，每个item使用的是绝对定位，只需要计算每个item的偏移量就行
// 这段代码实现了一个自动计算瀑布流位置的函数 computeWaterFallFlow，
// 它接受两个参数：ref 和 columns。
// 其中，ref 是一个 DOM 元素的引用，表示瀑布流的容器；columns 是一个可选参数，表示瀑布流的列数，默认为 2。
// 函数内部首先定义了一个 resizeListener 变量，用于监听窗口大小变化事件。
// 然后定义了一个 computeItem 函数，用于计算每个瀑布流 item 的位置和大小。
// 在 computeItem 函数内部，首先获取容器宽度和计算每个 item 的宽度和间距，然后使用一个数组 topList 来保存每列的高度，初始值都为 0。
// 接着遍历每个 item，找到当前高度最小的列，计算出该 item 的左偏移和上偏移，并设置其样式。
// 最后更新该列的高度，并更新容器的高度为所有列中最大的高度。
// 函数执行完毕后，会立即调用一次 computeItem 函数进行初始化，并且如果 resizeListener 为空，则添加一个窗口大小变化事件监听器，
// 当窗口大小变化时，重新计算瀑布流 item 的位置和大小。最后将该函数导出。

 const computeWaterFallFlow = (ref,colums = 2) => {
    let resizeListener = null
    const computeItem = () => {
        const item = ref.children
        const winWidth = window.innerWidth
        const margin = Math.round(winWidth*0.015)
        const itemWidth = Math.floor((winWidth - (colums+1)*margin)/colums)
        const topList = new Array(colums).fill(0)
        for(let i = 0; i<item.length;i++){
            item[i].style.width = itemWidth + 'px'
        }
        for(let i = 0; i < item.length; i++){
            let min = Math.min(...topList)
            const minIndex =  topList.indexOf(min)

            let left = margin * (minIndex + 1) + itemWidth* minIndex
            let top = min + margin
            item[i].style.transform = `translate(${left}px,${top}px)`
            topList[minIndex] +=item[i].clientHeight + margin
        }
        ref.style.height = Math.max(...topList) + margin +'px'
    }
    computeItem()

    if(!resizeListener){
        resizeListener = window.addEventListener('resize',() => {computeItem()})
    }
}

export default computeWaterFallFlow